import { BasicColumn, FormSchema } from '@/components/Table';
import { formatToDateTime } from '@/utils/dateUtil';
import { h } from 'vue';
import { RadioChangeEvent, Tag } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import { listNewMenuApi } from '@/api/system/menu';

export const columns: BasicColumn[] = [
  {
    title: '菜单名称',
    dataIndex: 'title',
    // width: 180,
  },
  {
    title: '图标',
    dataIndex: 'menuIcon',
    // width: 180,
    customRender: ({ record }) => {
      return h(Icon, { icon: record.menuIcon });
    },
  },
  {
    title: '排序',
    dataIndex: 'resSort',
    //
  },
  {
    title: '权限标识',
    dataIndex: 'permission',
    // width: 180,
  },
  {
    title: '组件路径',
    dataIndex: 'componentPath',
    // width: 180,
  },
  {
    title: '状态',
    dataIndex: 'resStatus',
    customRender: ({ record }) => {
      const status = record.resStatus;
      const enable = status === '0' ? true : false;
      const color = enable ? 'green' : 'red';
      const text = enable ? '正常' : '禁用';
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 180,
    customRender: ({ text }) => formatToDateTime(text),
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'title',
    label: '菜单名称',
    component: 'Input',
    colProps: { span: 4 },
  },
  {
    field: 'resStatus',
    label: '状态',
    component: 'Select',
    componentProps: {
      options: [
        { label: '正常', value: '0' },
        { label: '禁用', value: '1' },
      ],
    },
    colProps: { span: 4 },
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'parentId',
    label: '上级菜单',
    component: 'ApiTreeSelect',
    defaultValue: null,
    componentProps: {
      api: listNewMenuApi,
      // fieldNames: {
      //   label: 'name',
      //   key: 'id',
      //   value: 'id',
      // },
      labelField: 'title',
      valueField: 'id',
      immediate: true,
      // getPopupContainer: () => document.body,
    },
  },
  {
    field: 'type',
    label: '菜单类型',
    component: 'RadioGroup',
    defaultValue: '1',
    componentProps: ({ formModel, formActionType }) => {
      return {
        options: [
          { label: '目录', value: '1' },
          { label: '菜单', value: '2' },
          { label: '按钮', value: '3' },
        ],
        onChange: (event: RadioChangeEvent) => {
          const { parentId, title, resSort, resStatus, permission } = formModel;
          // 按钮类型时切换清空菜单 目录和菜单的数据能复用
          if (formActionType) {
            if (event.target?.value === '3') {
              formActionType?.resetFields();
              formActionType.setFieldsValue({ parentId, title, resSort, resStatus, permission });
              // 目录没有权限字符 切到目录时要清掉
            } else if (event.target.value === '1') {
              formActionType.setFieldsValue({
                permission: '',
                componentPath: '',
                query: '',
                menuCacheFlag: '2',
              });
            }
          }
        },
      };
    },
  },
  {
    field: 'menuIcon',
    label: '图标',
    component: 'IconPicker',
    required: true,
    ifShow: ({ values }) => {
      return values.type !== '3' ? true : false;
    },
    componentProps: {
      readonly: true,
    },
  },
  {
    field: 'title',
    label: '菜单标题',
    required: true,
    component: 'Input',
    componentProps: {
      maxlength: 50,
      showCount: true,
    },
    rules: [{ min: 2, max: 50, message: '菜单标题长度必须介于 2 和 50 之间', trigger: 'blur' }],
  },
  {
    field: 'componentName',
    label: '组件名称',
    required: true,
    component: 'Input',
    componentProps: {
      maxlength: 255,
      showCount: true,
    },
    ifShow: ({ values }) => (values.type === '3' ? false : true),
    rules: [{ min: 0, max: 255, message: '组件名称长度必须介于 0 和 255 之间', trigger: 'blur' }],
  },
  {
    field: 'resSort',
    label: '显示排序',
    component: 'InputNumber',
    defaultValue: 0,
    required: true,
    componentProps: {
      min: 0,
      precision: 0,
    },
  },
  {
    field: 'menuExtFlag',
    label: '是否外链',
    component: 'RadioGroup',
    defaultValue: '2',
    componentProps: {
      options: [
        { label: '是', value: '1' },
        { label: '否', value: '2' },
      ],
    },
    ifShow: ({ values }) => {
      return values.type !== '3' ? true : false;
    },
  },
  {
    field: 'routePath',
    label: '路由地址',
    component: 'Input',
    required: true,

    rules: [
      { min: 0, max: 1000, message: '路由地址长度必须介于 0 和 1000 之间', trigger: 'blur' },
      // 路由地址如果不以/开头 那么就是相当于父级的路由拼接的
      {
        validator: async (rule, value) => {
          if (!/^[/a-z]/i.test(value)) {
            return Promise.reject('路由地址必须以/或英文字母开头');
          }
        },
        message: '路由地址必须以/或英文字母开头',
        trigger: 'blur',
      },
    ],
    ifShow: ({ values }) => {
      return values.type !== '3';
    },
    componentProps: {
      maxlength: 1000,
      showCount: true,
      placeholder: '请输入以/或英文字母开头的路由地址',
    },
  },
  {
    field: 'componentPath',
    label: '组件路径',
    component: 'Input',
    ifShow: ({ values }) => {
      return values.type === '2' ? true : false;
    },
    componentProps: {
      maxlength: 255,
      showCount: true,
    },
    rules: [{ min: 0, max: 255, message: '组件路径长度必须介于 0 和 255 之间', trigger: 'blur' }],
  },
  {
    field: 'permission',
    label: '权限字符',
    component: 'Input',
    required: true,
    slot: 'permissionSlot',
    ifShow: ({ values }) => {
      return values.type !== '1';
    },
    componentProps: {
      maxlength: 50,
      showCount: true,
    },
    rules: [{ min: 0, max: 50, message: '权限字符长度必须介于 0 和 50 之间', trigger: 'blur' }],
  },
  // {
  //   field: 'query',
  //   label: '路由参数',
  //   component: 'Input',
  //   componentProps: {
  //     maxlength: 1000,
  //     showCount: true,
  //   },
  //   ifShow: ({ values }) => {
  //     return values.type === '2' ? true : false;
  //   },
  // },
  {
    field: 'menuCacheFlag',
    label: '是否缓存',
    component: 'RadioGroup',
    defaultValue: '2',
    componentProps: {
      options: [
        { label: '缓存', value: '1' },
        { label: '不缓存', value: '2' },
      ],
    },
    ifShow: ({ values }) => {
      return values.type === '2' ? true : false;
    },
  },
  // 适配三级菜单或者隐藏菜单的业务逻辑
  {
    field: 'menuHiddenFlag',
    label: '显示状态',
    component: 'RadioGroup',
    defaultValue: '1',
    componentProps: {
      options: [
        { label: '显示', value: '1' },
        { label: '隐藏', value: '2' },
      ],
    },
    ifShow: ({ values }) => {
      return values.type !== '3' ? true : false;
    },
  },
  {
    field: 'resStatus',
    label: '菜单状态',
    component: 'RadioGroup',
    defaultValue: '0',
    componentProps: {
      options: [
        { label: '正常', value: '0' },
        { label: '禁用', value: '1' },
      ],
    },
  },
];
